<template>
	<view class="container">
		<view class="content-nav" :style="{padding:list+7+'px'}" >
			<view class="nav-list" >
				<block v-for="(item,index) in tabBars">
					<view @click="bindTab" :data-id="item.id" class="item" :class="{'item-l':tabIndex==item.id}" >{{item.name}}</view>
				</block>
			</view>
		</view>
		<view style="height: 155rpx;" ></view>
	</view>
</template>

<script>
	export default {
		name:"navbar",
		data() {
			return {
				list:null,
				tabBars:[
					{name:'每日壁纸',id:0},
					{name:'壁纸专题',id:1}
				],
				tabIndex:0
			};
		},
		created() {
			this.list = uni.getSystemInfoSync().statusBarHeight
		},
		methods:{
			bindTab(e){
				console.log(e.currentTarget.dataset.id,'111')
				const id = e.currentTarget.dataset.id
				this.tabIndex=id
				if(id==0){
					this.tabS = !this.tabS
					//子传父
					this.$emit('getMsg', 0);
				}else if(id==1){
					this.tabL = !this.tabL
					//子传父
					this.$emit('getMsg', 1);
				}
			}
		}
	}
</script>

<style lang="scss">
	.content-nav{
		padding-bottom: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		background: #fff;
		position: fixed;
		left: 0;
		width: 100%;
		height: 60rpx;
		.nav-list{
			//background: #737373;
			width: 380rpx;
			height: 25rpx;
			display: flex;
			justify-content: space-around;
			.item{
				font-size:28rpx;
				align-items: center;
				color: #737373;
				//margin-inline-start: 25rpx;
			}
			.item-l{
				font-weight: 700;
				font-size: 36rpx;
				color: #000;
			}
		}
	}
</style>